﻿<script type="text/javascript">
    $(function() {
        var yueBaoBiaoChart = echarts.init(document.getElementById("banhezhan_yuebaobiao_chart"));
        $("#banhezhan_yuebaobiao_chart_chaxun").click(function() {
            //查询
            BindData();
        });
        $("#banhezhan_yuebaobiao_chart_daochu").click(function() {
            //导出
        });
        $("#banhezhan_yuebaobiao_chart_zhandian").combobox({
            url: 'json/zhandian.json',
            method: 'get',
            valueField: 'zhandian',
            textField: 'zhandian',
            panelWidth: 150,
            panelHeight: 'auto',
            editable: false,
            onLoadSuccess: function() {
                BindData();
            }
        });
        $("#banhezhan_yuebaobiao_chart_kaishi").combobox({
            onLoadSuccess: function() {
                var m = new Date().getMonth() + 1;
                $("#banhezhan_yuebaobiao_chart_kaishi").combobox('setValue', m);
            }
        });

        $("#banhezhan_yuebaobiao_chart_jieshu").combobox({
            onLoadSuccess: function() {
                var m = new Date().getMonth() + 1;
                $("#banhezhan_yuebaobiao_chart_jieshu").combobox('setValue', m);
            }
        });

        function BindData() {
            var dateKaiShi = $("#banhezhan_yuebaobiao_chart_kaishi").datebox('getValue');
            var dateJieShu = $("#banhezhan_yuebaobiao_chart_jieshu").datebox('getValue');
            var zhanDianStr = $("#banhezhan_yuebaobiao_chart_zhandian").combobox('getValue');
            var nianStr = $("#banhezhan_yuebaobiao_chart_nian").combobox('getValue');
            $.get('handler/banhezhanyuebao_chart.ashx', { zhandian: zhanDianStr, kaishishijian: dateKaiShi, jieshushijian: dateJieShu, nian: nianStr, uid: window.uid, kid: window.kid }, function (data, status) {
                yueBaoBiaoChart.clear();
                yueBaoBiaoChart.setOption({
                    title: {
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ["含水重量", "不含水重量"],
                    orient: 'vertical',
                    right: 0,
                    height: '100%'
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: 180,
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: data.x,
                    axisLabel: { rotate: 18, interval: 0 }
                },
                yAxis: {
                    type: 'value'
                },
                series:
                [
                    {
                        name: "含水重量",
                        type: "bar",
                        label: { normal: { show: true, position: 'top'} },
                        data: data.data1,
                        barMaxWidth:70
                    },
                    {
                        name: "不含水重量",
                        type: "bar",
                        label: { normal: { show: true, position: 'top'} },
                        data: data.data2,
                        barMaxWidth: 70
                    }
                ]
            });
        }, 'json');
    }

});
</script>

<div class="easyui-panel" data-options="height:90,border:false" title="数据检索" style="border-top-width: 0px;
    border-bottom-width: 1px; padding: 15px">
    <table style="font-size: 12px;">
        <tr>
            <td>
                站点：
            </td>
            <td>
                <input class="" name="banhezhan_yuebaobiao_chart_zhandian" id="banhezhan_yuebaobiao_chart_zhandian"
                    style="width: 150px;" />
            </td>
            <td>
                年份：
            </td>
            <td>
                <input id="banhezhan_yuebaobiao_chart_nian" type="text" class="easyui-combobox" data-options="required:true,valueField:'id',textField:'text',data:[{'id':2016,'text':'2016','selected':true},{'id':2017,'text':'2017'},{'id':2018,'text':'2018'},{'id':2019,'text':'2019'},{'id':2020,'text':'2020'}],panelHeight:100"
                    style="width: 100px">
            </td>
            <td>
                月份：
            </td>
            <td>
                <input id="banhezhan_yuebaobiao_chart_kaishi" type="text" class="" data-options="required:true,valueField:'id',textField:'text',data:[{'id':1,'text':'1月'},{'id':2,'text':'2月'},{'id':3,'text':'3月'},{'id':4,'text':'4月'},{'id':5,'text':'5月'},{'id':6,'text':'6月'},{'id':7,'text':'7月'},{'id':8,'text':'8月'},{'id':9,'text':'9月'},{'id':10,'text':'10月'},{'id':11,'text':'11月'},{'id':12,'text':'12月'}]"
                    style="width: 70px">
            </td>
            <td>
                至
            </td>
            <td>
                <input id="banhezhan_yuebaobiao_chart_jieshu" type="text" class="easyui-combobox"
                    data-options="required:true,valueField:'id',textField:'text',data:[{'id':1,'text':'1月'},{'id':2,'text':'2月'},{'id':3,'text':'3月'},{'id':4,'text':'4月'},{'id':5,'text':'5月'},{'id':6,'text':'6月'},{'id':7,'text':'7月'},{'id':8,'text':'8月'},{'id':9,'text':'9月'},{'id':10,'text':'10月'},{'id':11,'text':'11月'},{'id':12,'text':'12月'}]"
                    style="width: 70px">
            </td>
            <td>
                <a id="banhezhan_yuebaobiao_chart_chaxun" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
                    style="width: 60px; margin-left: 20px;">查询</a>
            </td>
        </tr>
    </table>
</div>
<div style="margin: 20px">
    <div id="banhezhan_yuebaobiao_chart" style="width: 100%; height: 75%">
    </div>
</div>
